<script setup lang="ts">
import { ref } from 'vue';
import GIcon from "@/components/icon/Index.vue";

interface Props {
  // 输入框类型，可选
  type?: 'text' | 'password' | 'hidden';
  // 输入框占位符，可选
  placeholder?: string;
  // 输入框是否禁用，可选
  disabled?: boolean;
  // 输入框是否只读，可选
  readonly?: boolean;
  // 输入框是否可清除，可选
  clearable?: boolean;
  // 输入框大小，可选
  size?: 'large' | 'big' | 'default' | 'small' | 'mini';
  // 输入框前缀图标，可选
  icon?: string | null;
  // 输入框后缀图标，可选
  suffixIcon?: string | null;
  // 是否触发表单验证，可选
  validateEvent?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  type: 'text',
  placeholder: '',
  disabled: false,
  readonly: false,
  clearable: false,
  size: 'default',
  icon: null,
  suffixIcon: null,
  validateEvent: false,
});

const modelValue = ref('');

const handleInput = (event: Event) => {
  modelValue.value = (event.target as HTMLInputElement).value;
};

const handleClear = () => {
  modelValue.value = '';
};
</script>

<template>
  <div class="input-container">
    <div class="prefix-icon" v-if="icon">
      <g-icon :name="icon"></g-icon>
    </div>
    <input
        :type="type"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :value="modelValue"
        @input="handleInput"
        class="input-field"
    />
    <div class="clear-icon" v-if="clearable && modelValue" @click="handleClear">
      <g-icon name="fas fa-times"></g-icon>
    </div>
    <div class="suffix-icon" v-if="suffixIcon">
      <g-icon :name="suffixIcon"></g-icon>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '../../assets/base' as *;

.input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.prefix-icon,
.suffix-icon {
  display: flex;
  align-items: center;
  margin: 0 5px;
}

.input-field {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid var(--input-border);
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s ease;
}

.input-field:focus {
  border-color: var(--input-focus-border);
}

.clear-icon {
  display: flex;
  align-items: center;
  margin-left: 5px;
  cursor: pointer;
}
</style>
